import type {CSSProperties} from "react";
import {useRef} from "react";

const RootStyle: CSSProperties = {
  padding: "6px",
  userSelect: "none",
}

const boxStyle: CSSProperties = {
  position: "relative",
  background: "white",
  borderRadius: "12px",
  height: "180px",
  overflow: "hidden",
}

const listStyle: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
}

const itemStyle: CSSProperties = {
  margin: "10px",
}

const TitleStyle: CSSProperties = {
  fontSize: "20px",
  color: "black",
  borderBottom: "1px solid #c5bfbf",
  marginBottom: "10px",
  paddingBottom: "10px",
  textAlign: "center",
}
const LabelStyle: CSSProperties = {
  marginRight: "10px",
  fontSize: "15px",
}
const ValueStyle: CSSProperties = {
  fontSize: "13px",
  wordBreak: "break-all",
  wordSpacing: "break-word",
}

const MoreInfoStyle: CSSProperties = {
  position: "absolute",
  bottom: "0",
  right: "11px",
  background: "white",
  color: "rgb(82 57 241)",
  cursor: "pointer"
}

interface IProps {
  title: string,
  itemData: {
    label: string,
    value: any
  }
}

const DescriptionsItem = (props: IProps) => {
  const {title, itemData} = props;
  const listRef = useRef<HTMLDivElement>(null);

  return (
    <div style={RootStyle} title={title}>
      <div style={boxStyle}>
        <div style={TitleStyle}>
          {title}
        </div>
        <div style={listStyle} ref={listRef}>
          {
              <div style={itemStyle} key={itemData.label}>
                <span style={LabelStyle}>{itemData.label}:</span>
                <span style={ValueStyle}>{itemData.value}</span>
              </div>
          }
        </div>

        <a style={MoreInfoStyle}>
          点击了解更多信息
        </a>

      </div>
    </div>
  )
}

export default DescriptionsItem;
